// src/APP.vue

<template>
<div id="list-rendering">
  <ol>
    <todo-item
      v-for="item in groceryList"
      :todo="item"
      :key="item.id"
    ></todo-item>
  </ol>
</div>
</template>

<script lang="ts">
export default {
  name: 'App',
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  }
}
</script>